<template>
    <div class="main">
        <div class="fixed-section">
            <div class="head-title">
                <div class="left-arrow" @click="onClickLeft"></div>
                <span>YBS</span>
            </div>
            <!--不同的语言环境显示不同的tab栏,因为样式上不一样，做了调整-->
            <div class="en-wraper" v-if="currentLang=='US'">
                <div class="nav-box item1"><span>Plan</span></div>
                <div class="nav-box item2" @click="$router.push('/ybs/bus-line')"><span>Bus Line</span></div>
                <div class="seperate-line"></div>
                <div class="nav-box item3" @click="$router.push('/ybs/bus-stop')"><span>Bus Stop</span></div>
            </div>
            <div v-else class="mm-wraper">
                <div class="bar bar1">
                    <span class="modify">လမ္းေျ</span>
                    <span class="modify">ကာင္းရွာမည္</span>
                </div>
                <div class="bar bar2" @click="$router.push('/ybs/bus-line')">
                    <span class="modify">ဘတ္စ္ကား</span>
                    <span class="modify">လိုင္းမ်ား</span>
                </div>
                <div class="seperate-line"></div>
                <div class="bar bar3" @click="$router.push('/ybs/bus-stop')">
                    <span class="modify">ဘတ္စ္ကား</span>
                    <span class="modify">မွတ္တိုင္မ်ား</span>
                </div>
            </div>
            <div class="search-wraper">
                <div class="search-row">
                    <div class="input-wraper">
                        <i class="start-icon"></i>
                        <input type="text" :placeholder="$t('m.Searchstartbusstop')" class="stop-search" v-model="startStop"
                               @click="$router.push({path:'/ybs/search-stop',query:{selectStart:1}})">
                    </div>
                    <img src="../../static/img/map.png" style="width:35px;"
                         @click="$router.push({path:'/ybs/bus-stop',query:{selectStart:1}})">
                </div>
                <div class="search-row">
                    <div class="input-wraper">
                        <i class="end-icon"></i>
                        <input type="text" :placeholder="$t('m.Searchendbusstop')" class="stop-search" v-model="endStop"
                               @click="$router.push({path:'/ybs/search-stop',query:{selectStart:0}})">
                    </div>
                    <img src="../../static/img/map.png" style="width:35px;"
                         @click="$router.push({path:'/ybs/bus-stop',query:{selectStart:0}})">
                </div>
                <div class="search-button" @click="toRouteDetail">
                    {{$t('m.Searchroute')}}
                </div>
            </div>
        </div>
        <div class="search-history-wraper">
            <div v-for="(item,index) in historyData" class="search-history-item" @click="historyToresult(item,index)">
                <div class="history-icon"></div>
                <div class="history-stop">
                    <p v-if="currentLang=='US'">{{item.start.startStopLangNameEn}}</p>
                    <p v-else>{{unicodeTozawgyi(item.start.startStopLangNameMm)}}</p>
                    <p v-if="currentLang=='US'">{{item.end.endStopLangNameEn}}</p>
                    <p v-else>{{unicodeTozawgyi(item.end.endStopLangNameMm)}}</p>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                startStop: '',
                startStopId:'',
                endStop: '',
                endStopId:'',
                currentLang: 'MM',
                historyData:[],
            }
        },
        methods: {
            //unicode转交集
            unicodeTozawgyi(value){
                if(value){
                    return this.$translateLang(value,'unicodeTozawgyi')||''
                }else{
                    return value;
                }
            },
            onClickLeft() {
                this.$router.push('/')
            },
            toRouteDetail() {
                if (this.startStop && this.endStop && this.startStop !== this.endStop) {
                    //说明本地存储里面已经有了startStopInfo和endStopInfo
                    //在这里执行保存历史记录的逻辑
                    //先根据当前语言判断，不同的语言存入不同的历史记录
                        let val = window.localStorage.getItem('busSearchHistory')
                        let localStart=JSON.parse(localStorage.getItem('startStopInfo')||"{}")
                        let localEnd=JSON.parse(localStorage.getItem('endStopInfo')||"{}")
                        //如果本地存储里面已经有了
                        if (val != null) {
                            val = JSON.parse(val)
                            let ifAdd=true
                            let tempIndex
                            //先判断有没有重的,有重的话就不新建数据了，获取到它在历史记录中的索引，把它移到第一位
                            val.forEach((item,index)=>{
                                //遍历历史记录数组，把当前本地存储里的起始站信息中的id和终点站信息中的id与数组中的每一项相比，
                                // 如果都相同,则代表重复
                                if(item.start.startStopId==this.startStopId&&item.end.endStopId==this.endStopId){
                                    ifAdd=false
                                    tempIndex=index
                                    console.log('有重的')
                                }
                            })
                            let tempObj={}
                            tempObj.start=localStart
                            tempObj.end=localEnd
                            //没有重的话就新建一个历史记录对象
                            if(ifAdd){
                                //然后判断历史记录长度，没有超就直接插，超了的话就删掉第一条数据 先设置为10条
                                if(val.length<10){
                                    val.unshift(tempObj)
                                    console.log('没有超，直接插')
                                }
                                else{
                                    val.shift()
                                    val.unshift(tempObj)
                                    console.log('超了，删了再插')
                                }
                            }
                            //有重的话就不新建数据,根据索引删掉它，然后在插在数组的最后面
                            else{
                                if(tempIndex){
                                    val.splice(tempIndex,1)
                                    val.unshift(tempObj)
                                    console.log('有重的，删了查到末尾')
                                }
                            }
                            window.localStorage.setItem('busSearchHistory',JSON.stringify(val))
                        }
                        //如果还没有搜索的历史记录，就新建一个数组，把当前本地存储里面的起始站信息和终点站信息放到一个对象里，再把这个对象push到新建的数组里
                        else{
                            console.log('还没有历史记录')
                            let historyArr=[]
                            let tempObj={}
                            tempObj.start=localStart||{}
                            tempObj.end=localEnd||{}
                            historyArr.unshift(tempObj)
                            window.localStorage.setItem('busSearchHistory',JSON.stringify(historyArr))
                        }

                    //最后执行页面跳转
                    this.$router.push('/ybs/route-result')
                }
                else if (this.startStop && !this.endStop) {
                    this.$toast(this.$t('m.Pleaseselectendstation'))
                }
                else if (!this.startStop && this.endStop) {
                    this.$toast(this.$t('m.Pleaseselectstartstation'))
                }
                else if (this.startStop == this.endStop) {
                    this.$toast(this.$t('m.Stationcannotbethesame'))
                }
                else {
                    this.$toast(this.$t('m.Pleaseselectbothstation'))
                }
            },
            historyToresult(item,index){
                //点击后应该使用item中的信息去覆盖当前本地存储中的startStopInfo和endStopInfo
                localStorage.setItem('startStopInfo',JSON.stringify(item.start))
                localStorage.setItem('endStopInfo',JSON.stringify(item.end))
                //然后把点击的这条记录在本地存储中重新排序，放到最后面,要遍历本地存储中的历史记录数组，找到对应的索引
                let historyArr=JSON.parse(localStorage.getItem('busSearchHistory')||"[]")
                historyArr.splice(index,1)
                historyArr.unshift(item)
                //最后覆盖本地存储
                localStorage.setItem('busSearchHistory',JSON.stringify(historyArr))
                console.log('删掉了然后查到最前面了')
                //然后跳转页面
                this.$router.push('/ybs/route-result')
            },
        },
        mounted() {
            //先获取语言信息
            this.currentLang = localStorage.getItem('lang') || 'MM'
            //然后从本地拿到起始站终点站信息
            let localStart=localStorage.getItem('startStopInfo')
            let localEnd=localStorage.getItem('endStopInfo')
            if (this.currentLang == 'US') {
                //不判断会报错
                if(localStart){
                    this.startStop = JSON.parse(localStart).startStopLangNameEn || ''
                    this.startStopId=JSON.parse(localStart).startStopId || ''
                }
                if(localEnd){
                    this.endStop = JSON.parse(localEnd).endStopLangNameEn || ''
                    this.endStopId=JSON.parse(localEnd).endStopId || ''
                }
                //英文环境下去获取英文历史记录
                let enHistory=localStorage.getItem('busSearchHistoryEn')
            }
            //之前存储在本地的缅文数据都是unicode的，必须转换成交集，要不然显示不了
            else {
                if(localStart){
                    let unicodeData=JSON.parse(localStart).startStopLangNameMm || ''
                    this.startStop = this.unicodeTozawgyi(unicodeData)
                    this.startStopId=JSON.parse(localStart).startStopId || ''
                }
                if(localEnd){
                    let unicodeData=JSON.parse(localEnd).endStopLangNameMm || ''
                    this.endStop = this.unicodeTozawgyi(unicodeData)
                    this.endStopId=JSON.parse(localEnd).endStopId || ''
                }
            }
            //然后获取搜索历史记录
            this.historyData=JSON.parse(localStorage.getItem('busSearchHistory'))
            console.dir(this.historyData)
        }
    }
</script>
<style scoped>
    .main {
        font-family: Zawgyi-One, Heslvetica Neue, Helvetica, Arial, sans-serif !important;
    }

    .fixed-section {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        background: white;
    }

    .fixed-section .head-title {
        text-align: center;
        height: 46px;
        position: relative;
    }

    .fixed-section .head-title .left-arrow {
        position: absolute;
        width: 28px;
        height: 28px;
        background: url(../../static/img/leftArrow.png);
        background-size: cover;
        left: 5px;
        top: 9px;
    }

    .fixed-section .head-title span {
        font-size: 20px;
        font-weight: 500;
        line-height: 46px;
        color: black;
    }

    .en-wraper {
        display: flex;
        align-items: center;
        margin: 5px;
    }

    .en-wraper .item1 {
        color:#F29D38;
        border-top: 2px solid #F29D38;
        border-left: 1px solid #E5E5E5;
        border-right: 1px solid #E5E5E5;
        -webkit-box-shadow: 0px 1px 14px -8px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 1px 14px -8px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 1px 14px -8px rgba(0, 0, 0, 0.75);
    }

    .en-wraper .item2 {
        border-bottom: 1px solid #E5E5E5;

    }

    .en-wraper .item3 {
        border-bottom: 1px solid #E5E5E5;

    }

    .en-wraper .nav-box {
        height: 54px;
        flex: 1;
        text-align: center;
        box-sizing: border-box;
    }

    .en-wraper .nav-box span {
        line-height: 54px;
    }

    .seperate-line {
        border: 0.5px solid;
        height: 27px;
    }

    .mm-wraper {
        display: flex;
        align-items: center;
        margin: 5px;
    }

    .mm-wraper .bar {
        height: 54px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .mm-wraper .bar1 {
        border-top: 2px solid #F29D38;
        border-left: 1px solid #E5E5E5;
        border-right: 1px solid #E5E5E5;
        -webkit-box-shadow: 0px 1px 14px -8px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 1px 14px -8px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 1px 14px -8px rgba(0, 0, 0, 0.75);
    }

    .mm-wraper .bar1 span {
        color: #F29D38 !important;
    }

    .mm-wraper .bar2 {
        border-bottom: 1px solid #E5E5E5;
    }

    .mm-wraper .bar3 {
        border-bottom: 1px solid #E5E5E5;
    }

    .mm-wraper .bar .modify {
        font-size: 14px;
        font-weight: 500;
        height: 27px;
        line-height: 27px;
        color: black;
    }

    .search-wraper {
    }

    .search-row {
        display: flex;
        margin: 8px 0 8px 8px;
        align-items: center;
    }

    .search-row .input-wraper {
        border: solid 1px rgb(229, 229, 229);
        border-radius: 5px;
        flex: 1;
        display: flex;
        align-items: center;
    }

    .search-row .input-wraper .start-icon {
        background: url(../../static/img/start.png) no-repeat;
        width: 25px;
        height: 25px;
        background-size: cover;
    }
    .search-row .input-wraper .end-icon {
        background: url(../../static/img/end.png) no-repeat;
        width: 25px;
        height: 25px;
        background-size: cover;
    }


    .search-row .input-wraper .stop-search {
        flex: 1;
        border: none;
        height: 35px;
    }

    .search-button {
        text-align: center;
        line-height: 35px;
        /*border: solid 1px rgb(229, 229, 229);*/
        border-radius: 5px;
        /*margin: 0 5px;*/
        font-size: 16px;

        border-top: 1px solid #96d1f8;
        background: #65a9d7;
        background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
        padding: 5px 10px;
        border-radius: 8px;
        -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
        box-shadow: rgba(0,0,0,1) 0 1px 0;
        text-shadow: rgba(0,0,0,.4) 0 1px 0;
        color: white;
    }

    .search-history-wraper{
        margin:260px 5px 0 5px;
    }
    .search-history-item {
        display:flex;
        align-items:center;
        border-radius:5px;
        margin:5px 0;
        -webkit-box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.56);
        -moz-box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.56);
        box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.56);
    }
    .search-history-item .history-icon{
        width:30px;
        height:30px;
        margin-left:5px;
        background:url(../../static/img/history.png) no-repeat;
        background-size:cover;
    }
    .search-history-item .history-stop{
        flex:1;
        margin-left:5px;
    }
    .search-history-item .history-stop p{
        margin:5px 0;
        line-height:20px;
        word-break:break-all;
        color:#8A8A8A;
    }

</style>
